import React, { useEffect, useState } from "react";
import "./index.css";
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import "./index.css";
import axios from "axios";

export default function Index() {
  const [nation, setNation] = useState([]);

  useEffect(() => {
    axios
      .get("/api/ecos/api_noauth/national_conditions?_=1689838099715")
      .then((res) => {
        console.log(res.data.national_conditions);
        setNation(res.data.national_conditions);
      });
  }, []);

  const settings = {
    dots: false,
    infinite: true,
    slidesToShow: 3,
    slidesToScroll: 1,
    autoplay: true,
    speed: 3000,
    autoplaySpeed: 3000,
    cssEase: "linear",
    variableWidth: "",
  };
  return (
    <div className="nation">
      <div className="nation_top">
        <div className="nation_title">国情纵览</div>
        <div className="nation_desc">
          一些文字性的描述，概括等等，没有去掉也可，最好留着
        </div>
      </div>

      <div className="swiper">
        <Slider {...settings}>
          {nation.map((item,key) => {
            return (
              <div key={item.id}>
                <div className="swiper_item">
                  <div className="swiper_item_text">
                    <div style={{ fontSize: "15px",textAlign:'center' }}>{item.country_name}</div>
                    <div className="swiper_item_textEng">
                      {item.english_name}
                    </div>
                  </div>
                  <img
                    className="nation_swiper"
                    src={'https://jn2.is.shanhe.com/shanghe2/'+item.cover}
                    alt=""
                  />
                </div>
              </div>
            );
          })}
        </Slider>
      </div>
      
      {/* <div className="swiper">
        <Slider {...settings}>
          <div>
            <div className="swiper_item">
              <div className="swiper_item_text">
                <div style={{ fontSize: "20px" }}>俄罗斯</div>
                <div className="swiper_item_textEng">Russia</div>
              </div>
              <img
                className="nation_swiper"
                src={require("../../images/country/els.jpg")}
                alt=""
              />
            </div>
          </div>
          <div>
            <div className="swiper_item">
              <div className="swiper_item_text">
                <div style={{ fontSize: "20px" }}>巴基斯坦</div>
                <div className="swiper_item_textEng">Pakistan</div>
              </div>
              <img
                className="nation_swiper"
                src={require("../../images/country/bjst.jpg")}
                alt=""
              />
            </div>
          </div>
          <div>
            <div className="swiper_item">
              <div className="swiper_item_text">
                <div style={{ fontSize: "20px" }}>印度</div>
                <div className="swiper_item_textEng">India</div>
              </div>
              <img
                className="nation_swiper"
                src={require("../../images/country/yd.png")}
                alt=""
              />
            </div>
          </div>
          <div>
            <div className="swiper_item">
              <div className="swiper_item_text">
                <div style={{ fontSize: "20px" }}>哈萨克斯坦</div>
                <div className="swiper_item_textEng">Kazakhstan</div>
              </div>
              <img
                className="nation_swiper"
                src={require("../../images/country/hskst.jpg")}
                alt=""
              />
            </div>
          </div>
          <div>
            <div className="swiper_item">
              <div className="swiper_item_text">
                <div style={{ fontSize: "20px" }}>吉尔吉斯斯坦</div>
                <div className="swiper_item_textEng">Kyrgyzstan</div>
              </div>
              <img
                className="nation_swiper"
                src={require("../../images/country/jejsst.jpg")}
                alt=""
              />
            </div>
          </div>
          <div>
            <div className="swiper_item">
              <div className="swiper_item_text">
                <div style={{ fontSize: "20px" }}>塔吉克斯坦</div>
                <div className="swiper_item_textEng">Tajikistan</div>
              </div>
              <img
                className="nation_swiper"
                src={require("../../images/country/tjkst.jpg")}
                alt=""
              />
            </div>
          </div>
          <div>
            <div className="swiper_item">
              <div className="swiper_item_text">
                <div style={{ fontSize: "20px" }}>乌兹别克斯坦</div>
                <div className="swiper_item_textEng">Uzbekistan</div>
              </div>
              <img
                className="nation_swiper"
                src={require("../../images/country/wzbkst.jpg")}
                alt=""
              />
            </div>
          </div>
        </Slider>
      </div> */}
      <div className="nation_bottom"></div>
    </div>
  );
}
